---
id: 614090d5a22b6f0a5a6b464c
title: Schritt 13
challengeType: 0
dashedName: step-13
---

<!-- TODO: I purposefully added the `nav` styles without Camper input -->

# --description--

Der untergeordnete Kombinator-Selektor `>` wird zwischen Selektoren verwendet, um nur Elemente auszuwählen, die mit dem zweiten Selektor übereinstimmen und ein direktes untergeordnetes Element des ersten Selektors sind.

Dies kann hilfreich sein, wenn du tief verschachtelte Elemente hast und den Umfang deines Stylings kontrollieren möchtest.

Verwende den `>`-Selektor, um die unsortierten Listenelemente innerhalb der `nav`-Elemente auszuwählen, und verwende _Flexbox_, um die untergeordneten Elemente gleichmäßig zu verteilen.

# --hints--

Du solltest den `nav > ul` Selektor verwenden.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
```

Du solltest den `nav > ul` Elementen ein `display` von `flex` zuweisen.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
```

Du solltest dem `nav > ul` Element ein `justify-content` von `space-evenly` zuweisen.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

--fcc-editable-region--

--fcc-editable-region--
```
